<!-- doctorImgDetail -->
<template>
  <div class="container" oncontextmenu="return false">
    <!-- @clickRight="showShare = true" -->
    <navbar
      @touchmove.prevent
      ref="navbar"
      :vaniconL="true"
      :vaniconR="false"
      iconNameL="arrow-left"
      iconNameR="icon-gengduo"
      noRight="true"
      @clickLeft="goBack"
      bgcolor="rgb(55, 81, 255) !important"
      bgImage="linear-gradient(rgb(55, 81, 255) 0%, rgb(76, 99, 255) 50%, rgb(91 112 255) 75%, rgb(107 127 255) 100%) !important"
      >图片详情</navbar
    >
    <div class="image-container" ref="imcon">
      <ul class="image-list">
        <li
          class="image-box"
          v-for="(item, index) in dcmData"
          :key="index"
          @click="xulieNowClick(item, index)"
        >
          <div :ref="'canvas' + (index + 1)" class="canvas"></div>
          <van-tag
            mark
            v-if="comData"
            class="xulieTag"
            :type="item.classId == 0 ? 'success' : 'warning'"
            >{{ item.classId == 0 ? "数据1" : "数据2" }}</van-tag
          >
          <span class="window">{{ index + 1 }}</span>
        </li>
      </ul>
    </div>
    <van-share-sheet
      v-model="showShare"
      :title="$t('detail.share_to_friends_now')"
      :options="options"
      @select="onSelect"
    />
    <div id="stone" ref="stone" :style="{ height: stRight }" class="stone">
      <div
        :class="
          s1Flag
            ? 'w100 h100'
            : s2Flag
            ? 'w100 h100'
            : s3Flag
            ? 'w100 h100'
            : s4Flag
            ? 'w100 h50'
            : ''
        "
        class="s-up"
      >
        <v-touch
          ref="center"
          class="center"
          :class="[
            s1Flag
              ? 'w100 h100'
              : s2Flag
              ? 'w50 h100'
              : s3Flag
              ? 'w100 h50'
              : s4Flag
              ? 'w50 h100'
              : '',
            selectIndex == 0 ? 'selectNow' : '',
          ]"
          oncontextmenu="return false"
          @swipeleft="swiperleft(0)"
          @swiperight="swiperright(0)"
          @tap="clickNow(0)"
          onmousedown="return false"
        >
          <div
            class="openSlider"
            @click="openSelect"
            :class="slideFlagone ? '' : 'closeSlider'"
          >
            <span>{{ slideFlagone ? "滑动开启" : "滑动停止" }}</span>
          </div>
          <div
            ref="canvas"
            class="canvas"
            @touchmove.prevent="drawListen"
            @touchstart.prevent="drawStart"
            @touchend.prevent="drawEnd"
            @cornerstoneimagerendered="onImageRendered"
          ></div>
          <div class="canvas-tip">
            <span>WW/WC {{ wwone }}/{{ wcone }}</span>
            <span>缩放比例: {{ scaleone }}</span>
            <span
              >图像: {{ dcmOneNow }}/{{
                oneMarkObj.imgList ? oneMarkObj.imgList.length - 1 : 0
              }}</span
            >
          </div>
          <div class="slider" v-if="marksFlag">
            <div class="prv" @click="prvClick(0)" @touchmove.prevent>
              <van-icon name="play" color="#ffffff" size="0.3rem" />
            </div>
            <el-slider
              class="elslider"
              :show-tooltip="false"
              v-model="dcmOneNow"
              :disabled="oneMarkObj.imgList.length - 1 == 0"
              :marks="oneMarks"
              :min="0"
              :max="oneMarkObj.imgList.length - 1"
              @change="updateDcm(oneMarkObj, dcmOneNow)"
              @input="updateInput(0)"
            ></el-slider>
            <div class="next" @click="nextClick(0)" @touchmove.prevent>
              <van-icon name="play" color="#ffffff" size="0.3rem" />
            </div>
          </div>
          <p class="textXulie">序列:{{ xulieNowIndex }}</p>
        </v-touch>
        <v-touch
          class="center"
          v-show="s2Flag || s3Flag || s4Flag"
          :class="[
            s2Flag
              ? 'w50 h100'
              : s3Flag
              ? 'w100 h50'
              : s4Flag
              ? 'w50 h100'
              : '',
            selectIndex == 1 ? 'selectNow' : '',
          ]"
          oncontextmenu="return false"
          @swipeleft="swiperleft(1)"
          @swiperight="swiperright(1)"
          @tap="clickNow(1)"
          onmousedown="return false"
        >
          <div
            class="openSlider"
            @click="openSelect"
            :class="slideFlagtwo ? '' : 'closeSlider'"
          >
            <span>{{ slideFlagtwo ? "滑动开启" : "滑动停止" }}</span>
          </div>
          <div
            ref="canvastwo"
            class="canvas"
            @touchmove.prevent="drawTwoListen"
            @touchstart.prevent="drawTwoStart"
            @touchend.prevent="drawTwoEnd"
            @cornerstoneimagerendered="onImageRenderedTwo"
          ></div>
          <div class="canvas-tip">
            <span>WW/WC: {{ wwtwo }}/{{ wctwo }}</span>
            <span>缩放比例: {{ scaletwo }}</span>
            <span
              >图像: {{ dcmTwoNow }}/{{
                twoMarkObj.imgList ? twoMarkObj.imgList.length - 1 : 0
              }}</span
            >
          </div>
          <div class="slider" v-if="marksFlag">
            <div class="prv" @click="prvClick(1)" @touchmove.prevent>
              <van-icon name="play" color="#ffffff" size="0.3rem" />
            </div>
            <el-slider
              class="elslider"
              :disabled="
                !twoMarkObj.imgList || twoMarkObj.imgList.length - 1 == 0
              "
              :show-tooltip="false"
              v-model="dcmTwoNow"
              :marks="twoMarks"
              :min="0"
              :max="twoMarkObj.imgList ? twoMarkObj.imgList.length - 1 : 0"
              @change="updateDcm2(twoMarkObj, dcmTwoNow)"
              @input="updateInput(1)"
            ></el-slider>
            <div class="next" @click="nextClick(1)" @touchmove.prevent>
              <van-icon name="play" color="#ffffff" size="0.3rem" />
            </div>
          </div>
          <p class="textXulie">序列:{{ xulieNowIndexTwo }}</p>
        </v-touch>
      </div>
      <div class="s-up" v-show="s4Flag">
        <v-touch
          class="center"
          :class="[
            s4Flag ? 'w50 h100' : '',
            selectIndex == 2 ? 'selectNow' : '',
          ]"
          v-show="s4Flag"
          oncontextmenu="return false"
          @swipeleft="swiperleft(2)"
          @swiperight="swiperright(2)"
          @tap="clickNow(2)"
          onmousedown="return false"
        >
          <div
            class="openSlider"
            @click="openSelect"
            :class="slideFlagthree ? '' : 'closeSlider'"
          >
            <span>{{ slideFlagthree ? "滑动开启" : "滑动停止" }}</span>
          </div>
          <div
            ref="canvasthree"
            class="canvas"
            @touchmove.prevent="drawThreeListen"
            @touchstart.prevent="drawThreeStart"
            @touchend.prevent="drawThreeEnd"
            @cornerstoneimagerendered="onImageRenderedThree"
          ></div>
          <div class="canvas-tip">
            <span>WW/WC {{ wwthree }}/{{ wcthree }}</span>
            <span>缩放比例: {{ scalethree }}</span>
            <span
              >图像: {{ dcmThreeNow }}/{{
                threeMarkObj.imgList ? threeMarkObj.imgList.length - 1 : 0
              }}</span
            >
          </div>
          <div class="slider" v-if="marksFlag">
            <div class="prv" @click="prvClick(2)" @touchmove.prevent>
              <van-icon name="play" color="#ffffff" size="0.3rem" />
            </div>
            <el-slider
              class="elslider"
              :disabled="
                !threeMarkObj.imgList || threeMarkObj.imgList.length - 1 == 0
              "
              :show-tooltip="false"
              v-model="dcmThreeNow"
              :marks="threeMarks"
              :min="0"
              :max="threeMarkObj.imgList ? threeMarkObj.imgList.length - 1 : 0"
              @change="updateDcm3(threeMarkObj, dcmThreeNow)"
              @input="updateInput(2)"
            ></el-slider>
            <div class="next" @click="nextClick(2)" @touchmove.prevent>
              <van-icon name="play" color="#ffffff" size="0.3rem" />
            </div>
          </div>
          <p class="textXulie">序列:{{ xulieNowIndexThree }}</p>
        </v-touch>
        <v-touch
          class="center"
          v-show="s4Flag"
          :class="[
            s4Flag ? 'w50 h100' : '',
            selectIndex == 3 ? 'selectNow' : '',
          ]"
          oncontextmenu="return false"
          @swipeleft="swiperleft(3)"
          @swiperight="swiperright(3)"
          @tap="clickNow(3)"
          onmousedown="return false"
        >
          <div
            class="openSlider"
            @click="openSelect"
            :class="slideFlagfour ? '' : 'closeSlider'"
          >
            <span>{{ slideFlagfour ? "滑动开启" : "滑动停止" }}</span>
          </div>
          <div
            ref="canvasfour"
            class="canvas"
            @touchmove.prevent="drawFourListen"
            @touchstart.prevent="drawFourStart"
            @touchend.prevent="drawFourEnd"
            @cornerstoneimagerendered="onImageRenderedFour"
          ></div>
          <div class="canvas-tip">
            <span>WW/WC {{ wwfour }}/{{ wcfour }}</span>
            <span>缩放比例: {{ scalefour }}</span>
            <span
              >图像: {{ dcmFourNow }}/{{
                fourMarkObj.imgList ? fourMarkObj.imgList.length - 1 : 0
              }}</span
            >
          </div>
          <div class="slider" v-if="marksFlag">
            <div class="prv" @click="prvClick(3)" @touchmove.prevent>
              <van-icon name="play" color="#ffffff" size="0.3rem" />
            </div>
            <el-slider
              class="elslider"
              :disabled="
                !fourMarkObj.imgList || fourMarkObj.imgList.length - 1 == 0
              "
              :show-tooltip="false"
              v-model="dcmFourNow"
              :marks="fourMarks"
              :min="0"
              :max="fourMarkObj.imgList ? fourMarkObj.imgList.length - 1 : 0"
              @change="updateDcm4(fourMarkObj, dcmFourNow)"
              @input="updateInput(3)"
            ></el-slider>
            <div class="next" @click="nextClick(3)" @touchmove.prevent>
              <van-icon name="play" color="#ffffff" size="0.3rem" />
            </div>
          </div>
          <p class="textXulie">序列:{{ xulieNowIndexFour }}</p>
        </v-touch>
      </div>
    </div>

    <div class="footer" @touchmove.prevent ref="foot">
      <span v-if="!comData" class="btn" @click="xulieClick">
        <span class="icon icon-viewGrid-fill"></span>
        <span class="text">布局</span>
      </span>

      <span class="btn" @click="funOpen">
        <van-icon name="cluster-o" size="0.2rem" />
        <span class="text">功能</span>
      </span>
      <span class="btn">
        <!-- <van-icon name="orders-o" size="0.2rem" @click="ggoDisplay" /> -->
        <!-- <span class="text">病灶</span> -->
        <van-icon
          :name="playFlag ? 'pause-circle-o' : 'play-circle-o'"
          size="0.2rem"
          :color="btnFlag ? '#fff' : '#999'"
          @click="imagePlay(selectIndex)"
        />
        <span :style="{ color: btnFlag ? '#fff' : '#999' }" class="text">{{
          playFlag ? "暂停" : "播放"
        }}</span>
      </span>
      <span
        v-if="aiStatus == 2"
        class="btn"
        :class="drawFlag ? 'nowClick' : ''"
      >
        <van-icon size="0.2rem" @click="drawFun" name="edit" />
        <span class="text">勾画</span>
      </span>
      <span
        class="btn"
        v-if="aiStatus == 4 || aiStatus == 5 || aiStatus == 6"
        :class="aiFlag ? 'nowClick' : ''"
      >
        <span class="icon icon-rengongzhinengdanao" @click="aiDisplay"></span>
        <span class="text">医生标注</span>
      </span>
      <span class="btn">
        <span class="icon icon-zhongzhi" @click="reset"></span>
        <span class="text">{{ $t("detail.reset") }}</span>
      </span>
    </div>
    <van-overlay :show="xulieFlag" @click="xulieFlag = false">
      <div class="xulie" v-show="xulieFlag">
        <ul>
          <li @click="oneone">
            <span>1X1</span>
            <table>
              <tbody>
                <tr style="height: 0.2rem">
                  <td style="width: 0.2rem"></td>
                </tr>
              </tbody>
            </table>
          </li>
          <li @click="onetwo">
            <span>1X2</span>
            <table>
              <tbody>
                <tr style="height: 0.2rem">
                  <td style="width: 0.1rem"></td>
                  <td style="width: 0.1rem"></td>
                </tr>
              </tbody>
            </table>
          </li>
          <li @click="twoone">
            <span>2X1</span>
            <table>
              <tbody>
                <tr style="height: 0.1rem">
                  <td style="width: 0.2rem"></td>
                </tr>
                <tr style="height: 0.1rem">
                  <td style="width: 0.2rem"></td>
                </tr>
              </tbody>
            </table>
          </li>
          <li @click="twotwo">
            <span>2X2</span>
            <table>
              <tbody>
                <tr style="height: 0.1rem">
                  <td style="width: 0.1rem"></td>
                  <td style="width: 0.1rem"></td>
                </tr>
                <tr style="height: 0.1rem">
                  <td style="width: 0.1rem"></td>
                  <td style="width: 0.1rem"></td>
                </tr>
              </tbody>
            </table>
          </li>
        </ul>
      </div>
    </van-overlay>

    <van-overlay :show="funFlag" @click="funFlag = false">
      <ul class="funList">
        <li>
          <span class="btn" @click="openSelect">
            <span class="icon icon-zuoyouhuadong"></span>
            <span class="text">浏览模式</span>
          </span>
        </li>
        <li>
          <span
            class="btn"
            :class="wwwcFlag ? 'nowClick' : ''"
            @click="wwcDisplay"
          >
            <span class="icon icon-duibi"></span>
            <span class="text">调节窗位</span>
          </span>
        </li>
        <li>
          <span
            class="btn"
            :class="zoomFlag ? 'nowClick' : ''"
            @click="zoomDisplay"
          >
            <span class="icon icon-sy"></span>
            <span class="text">缩放移动</span>
          </span>
        </li>
        <li>
          <span class="btn" @click="sliderDisplay">
            <span class="icon icon-fanse"></span>
            <span class="text">{{ $t("detail.slide") }}</span>
          </span>
        </li>
        <li>
          <span class="btn" @click="roate90">
            <span class="icon icon-shunshizhenxuanzhuan"></span>
            <span class="text">旋转90°</span>
          </span>
        </li>
      </ul>
    </van-overlay>
    <van-popup
      v-model="ggoFlag"
      closeable
      position="bottom"
      :style="{ height: '75vh' }"
    >
      <van-divider class="line">个人信息</van-divider>
      <div class="per-mes">
        <div>
          <p>姓名: {{ dcmData[0] ? dcmData[0].patientName : "--/--" }}</p>
          <p>性别: {{ dcmData[0] ? dcmData[0].sex : "--/--" }}</p>
        </div>
        <div>
          <p>年龄: {{ dcmData[0] ? dcmData[0].age : "--/--" }}</p>
          <p>
            病人体位: {{ dcmData[0] ? dcmData[0].patientPosition : "--/--" }}
          </p>
        </div>
        <p>共 {{ dcmData.length > 0 ? dcmData.length : "0" }} 个序列</p>
      </div>
      <van-divider>影像信息</van-divider>
      <div class="per-mes1">
        <div>
          <p>序列</p>
          <p>切片厚度</p>
          <p>形式</p>
        </div>
        <div v-for="(item, index) in dcmData" :key="index">
          <p>{{ index + 1 }}</p>
          <p>{{ item.sliceThickness }}</p>
          <p>{{ item.modality }}</p>
        </div>
      </div>
    </van-popup>
    <van-popup
      round
      style="background: #fafaff"
      v-model="showFade"
      closeable
      position="bottom"
      :style="{ height: '80%' }"
    >
      <div class="wrapper">
        <p class="title">分享二维码</p>
        <van-image width="2rem" height="2rem" :src="codeImg" />
        <div>
          <div class="vicon" @click="creatQrCode">
            <van-icon name="replay" />
          </div>
          <p>
            <van-icon name="info-o" />
            二维码的有效时限为&nbsp;{{ shareTime }}&nbsp;分钟
          </p>
          <p v-if="passFlag"><van-icon name="info-o" />已设置了四位数安全码</p>
          <p><van-icon name="info-o" />修改请到(我的-分享设置)进行修改</p>
        </div>
      </div>
    </van-popup>
    <van-dialog
      v-model="drawOneShow"
      @confirm="drawOneConfirm"
      @cancel="drawOneCancel"
      title="勾画信息"
      show-cancel-button
    >
      <van-field
        v-model="drawOneMessage"
        rows="2"
        autosize
        type="textarea"
        maxlength="100"
        placeholder="请输入勾画信息"
        show-word-limit
      />
    </van-dialog>
  </div>
</template>

<script>
import { getDcmXulie } from "@/api/noduleList";
import { setPhoneLunginfo, getDataByDsid } from "@/api/doctor";
import { codeUpdate, getUserShareOption } from "@/api/share";
import * as cornerstone from "cornerstone-core";
import * as cornerstoneMath from "cornerstone-math";
import * as cornerstoneTools from "cornerstone-tools";
import * as cornerstoneWebImageLoader from "cornerstone-web-image-loader";
import * as cornerstoneWADOImageLoader from "cornerstone-wado-image-loader";
import * as dicomParser from "dicom-parser";
import Hammer from "hammerjs";
import { Notify } from "vant";
import QRCode from "qrcodejs2";
import navbar from "@/components/navbar";
import { Toast } from "vant";
import { NoticeBar } from "vant";
import { mapGetters } from "vuex";

cornerstoneWebImageLoader.external.cornerstone = cornerstone;
cornerstoneWADOImageLoader.external.cornerstone = cornerstone;
cornerstoneWADOImageLoader.external.dicomParser = dicomParser;
cornerstoneTools.external.cornerstone = cornerstone;
cornerstoneTools.external.cornerstoneMath = cornerstoneMath;
cornerstoneTools.external.Hammer = Hammer;
cornerstoneTools.init();
export default {
  name: "doctorImgDetail",
  data() {
    return {
      btnFlag: false,
      wwwcFlag: false, // wwwc列表flag
      zoomFlag: false, // 放大列表flag
      dicomData: [], // dcm数据
      imageIndex: 0, // 当前片位
      wwone: 0, // 窗位1
      wcone: 0,
      wwtwo: 0,
      wctwo: 0,
      wwthree: 0,
      wcthree: 0,
      wwfour: 0, // 窗位4
      wcfour: 0,
      scaleone: 0, // 缩放比例1
      scaletwo: 0,
      scalethree: 0,
      scalefour: 0, // 缩放比例4
      showShare: false, // 分享flag
      options: [
        { name: "二维码", icon: "qrcode" },
        // { name: "复制链接", icon: "link" }
      ],
      findggoData: [], // 病灶数据
      dsId: null,
      patientId: null,
      showFade: false, // qrcode flag
      marksFlag: false,
      timerOne: null, // 播放1
      timerTwo: null,
      timerThree: null,
      timerFour: null, //播放4
      openid: null,
      shareTime: null, //分享时间
      passFlag: false, //是否设置安全码
      codeImg: null, //二维码img
      ggoFlag: false, //信息框
      slideFlagone: true, // 窗位1滑动
      slideFlagtwo: true, // 窗位1滑动
      slideFlagthree: true, // 窗位1滑动
      slideFlagfour: true, // 窗位1滑动
      aiFlag: true, //ai标注
      stRight: "100%", //序列大窗口动态高度
      xulieFlag: false, //工具栏序列窗口显示
      s1Flag: true, // 窗位1样式判断
      s2Flag: false,
      s3Flag: false,
      s4Flag: false, //窗位4样式判断
      selectIndex: 0, //当前选中窗口
      dcmData: [], //序列窗口数据
      dcmOneNow: 0, //序列窗1当前图像值
      dcmTwoNow: 0,
      dcmThreeNow: 0,
      dcmFourNow: 0, //序列窗4当前图像值
      oneMarks: {}, // 窗位1进度条
      oneMarkObj: {}, //窗位1数据
      xulieNowIndex: 1, //窗位1当前序列
      twoMarks: {},
      twoMarkObj: {},
      xulieNowIndexTwo: 1,
      threeMarks: {},
      threeMarkObj: {},
      xulieNowIndexThree: 1,
      fourMarks: {}, // 窗位4进度条
      fourMarkObj: {}, //窗位4数据
      xulieNowIndexFour: 1, //窗位4当前序列
      playFlag: false, //播放状态
      flagArr: [false, false, false, false], // 序列各窗口的播放状态
      imageEvent1: null,
      imageEvent2: null,
      imageEvent3: null,
      imageEvent4: null,
      woneNum: 0, // watch窗位1 index
      wonechange: false, // 窗位1切换状态
      wtwoNum: 0,
      wtwochange: false,
      wthreeNum: 0,
      wthreechange: false,
      wfourNum: 0, // watch窗位4 index
      wfourchange: false, // 窗位4切换状态
      userDatas: null,
      drawFlag: false,
      startPoint: { x: undefined, y: undefined },
      comData: null,
      arrXone: [], //窗口1勾画x
      arrYone: [], //窗口1勾画y
      drawOneShow: false, // 窗口1弹出框
      drawOneMessage: "", //窗口1勾画信息
      drawOneData: [],
      drawTwoData: [],
      drawThreeData: [],
      drawFourData: [],
      aiStatus: null,
      funFlag: false,
    };
  },
  watch: {
    oneMarkObj: {
      immediate: false,
      handler(val, oldVal) {
        if (val != oldVal) {
          this.woneNum++;
          if (this.woneNum > 1) {
            this.wonechange = true;
          }
        }
      },
    },
    twoMarkObj: {
      immediate: false,
      handler(val, oldVal) {
        if (val != oldVal) {
          this.wtwoNum++;
          if (this.wtwoNum > 1) {
            this.wtwochange = true;
          }
        }
      },
    },
    threeMarkObj: {
      immediate: false,
      handler(val, oldVal) {
        if (val != oldVal) {
          this.wthreeNum++;
          if (this.wthreeNum > 1) {
            this.wthreechange = true;
          }
        }
      },
    },
    fourMarkObj: {
      immediate: false,
      handler(val, oldVal) {
        if (val != oldVal) {
          this.wfourNum++;
          if (this.wfourNum > 1) {
            this.wfourchange = true;
          }
        }
      },
    },
    oneMarks: {
      handler(val, oldVal) {
        if (val != oldVal) {
          this.oneMarks = val;
        }
      },
    },
    twoMarks: {
      handler(val, oldVal) {
        if (val != oldVal) {
          this.twoMarks = val;
        }
      },
    },
    threeMarks: {
      handler(val, oldVal) {
        if (val != oldVal) {
          this.threeMarks = val;
        }
      },
    },
    fourMarks: {
      handler(val, oldVal) {
        if (val != oldVal) {
          this.fourMarks = val;
        }
      },
    },
  },
  computed: {
    ...mapGetters(["pId", "dId", "userData"]),
    validList() {
      return this.findggoData.filter((item) => {
        return item.ifDiameter == "0";
      });
    },
  },
  components: { navbar },
  async created() {
    // this.openid = this.userData.info ? this.userData.info.openId : null;
    this.userDatas = JSON.parse(this.userData);
    this.openid = "ou-IA1XlO3rg_g3Ljsgh0oq3NjDg";
    this.dsId = this.dId;
    this.comData = this.$route.params.comData
      ? JSON.parse(this.$route.params.comData)
      : null;
    this.patientId = this.pId;
    let toast1 = Toast.loading({
      message: this.$t("detailList.loading"),
      forbidClick: true,
      overlay: true,
    });
    let _this = this;
    console.log(this.$route)
    if (this.$route.params.dsid) {
      let xulie = await getDcmXulie(
        this.$route.params.dsid,
        this.$route.params.orderId
      );
      if (xulie.status.code == 200) {
        let arr = xulie.data.imglist;
        this.aiStatus = xulie.data.orderStatus;
        arr.forEach((item, index) => {
          this.dcmData.push(item);
        });
        this.creatFun();
        this.updateDcm(this.dcmData[0], 0);
        this.uodateOne(0);
      }
    } else if (this.comData) {
      let arr = this.comData.imglist;
      let deal = [];
      arr.forEach((item, index) => {
        this.dcmData.push(item);
        if (item.classId == 1) {
          deal.push(item);
        }
      });
      setTimeout(() => {
        this.creatFun();
        this.updateDcm(this.dcmData[0], 0);
        this.uodateOne(0);
        this.twoone();
        this.updateDcm2(deal[0], 0);
      }, 100);
    }
    let shareData = await getUserShareOption(this.openid);
    if (shareData.status.code == 200) {
      this.shareTime = shareData.data.expire;
      shareData.data.secret === null
        ? (this.passFlag = false)
        : (this.passFlag = true);
    } else {
      Toast.fail(shareData.status.msg);
    }
    Toast.setDefaultOptions({ duration: 500 });
    let data = {
      dsId: this.oneMarkObj.dsId,
      orderId: this.$route.params.orderId,
    };
    getDataByDsid(data).then((res) => {
      if (res.status.code == 200) {
        this.drawOneData = res.data.analysisData;
        this.drawOneData.forEach((item) => {
          this.oneMarks[parseInt(item.z)] = "";
        });
      }
    });
  },
  mounted() {
    let _this = this;
    let h = window.getComputedStyle(_this.$refs.foot ? _this.$refs.foot : false)
      .height;
    let h1 = window.getComputedStyle(
      _this.$refs.navbar.$el ? _this.$refs.navbar.$el : false
    ).height;
    let h2 = window.getComputedStyle(
      _this.$refs.imcon ? _this.$refs.imcon : false
    ).height;
    h = h.replace(/px/g, "");
    h1 = h1.replace(/px/g, "");
    h2 = h2.replace(/px/g, "");
    _this.stRight =
      window.innerHeight - (Number(h) + Number(h1) + Number(h2)) + "px";
    let a = function () {
      let h = window.getComputedStyle(
        _this.$refs.foot ? _this.$refs.foot : false
      ).height;
      let h1 = window.getComputedStyle(
        _this.$refs.navbar.$el ? _this.$refs.navbar.$el : false
      ).height;
      let h2 = window.getComputedStyle(
        _this.$refs.imcon ? _this.$refs.imcon : false
      ).height;
      h = h.replace(/px/g, "");
      h1 = h1.replace(/px/g, "");
      h2 = h2.replace(/px/g, "");
      _this.stRight =
        window.innerHeight - (Number(h) + Number(h1) + Number(h2)) + "px";
    };
    window.addEventListener("resize", a);
    setTimeout(() => {
      this.$nextTick(() => {
        this.selectIndex = 0;
        this.xulieNowClick(this.oneMarkObj, 0);
      });
    }, 1000);
  },
  beforeUpdate() {},
  beforeDestroy() {
    clearInterval(this.timerOne);
    clearInterval(this.timerTwo);
    clearInterval(this.timerThree);
    clearInterval(this.timerFour);
  },
  methods: {
    creatFun() {
      let element = this.$refs.canvas;
      let element2 = this.$refs.canvastwo;
      let element3 = this.$refs.canvasthree;
      let element4 = this.$refs.canvasfour;
      cornerstone.enable(element);
      cornerstone.enable(element2);
      cornerstone.enable(element3);
      cornerstone.enable(element4);
    },
    updateDcm(item, i) {
      console.log(item)
      this.$nextTick(() => {
        this.oneMarkObj = item;
        let element = this.$refs.canvas;
        let _this = this;
        cornerstone
          .loadAndCacheImage(
            // "wadouri:https://ds.pushiyixue.com/file/A1373/PET CT/" +
            //   item.fileName +
            //   "/org_dicom/z/" +
            //   item.imgList[i]
            `https://ds.pushiyixue.com/file/${this.oneMarkObj.dsId}/${this.oneMarkObj.imgList[i]}`
          )
          .then(function (image) {
            _this.dcmOneNow = i;
            let viewport = cornerstone.getViewport(element);
            cornerstone.displayImage(element, image, viewport);
            cornerstone.reset(element, false);
            if (_this.wonechange) {
              cornerstone.reset(element);
              _this.wonechange = false;
            }
          });
      });
    },
    updateDcm2(item, i) {
      this.$nextTick(() => {
        this.twoMarkObj = item;
        let element = this.$refs.canvastwo;
        let _this = this;
        cornerstone
          .loadAndCacheImage(
            `https://ds.pushiyixue.com/file/${this.twoMarkObj.dsId}/${this.twoMarkObj.imgList[i]}`
          )
          .then(function (image) {
            _this.dcmTwoNow = i;
            let viewport = cornerstone.getViewport(element);
            cornerstone.displayImage(element, image, viewport);
            cornerstone.reset(element, false);
            if (_this.wtwochange) {
              cornerstone.reset(element);
              _this.wtwochange = false;
            }
          });
      });
    },
    updateDcm3(item, i) {
      this.$nextTick(() => {
        this.threeMarkObj = item;
        let element = this.$refs.canvasthree;
        let _this = this;
        cornerstone
          .loadAndCacheImage(
            `https://ds.pushiyixue.com/file/${this.threeMarkObj.dsId}/${this.threeMarkObj.imgList[i]}`
          )
          .then(function (image) {
            _this.dcmThreeNow = i;
            let viewport = cornerstone.getViewport(element);
            cornerstone.displayImage(element, image, viewport);
            cornerstone.reset(element, false);
            if (_this.wthreechange) {
              cornerstone.reset(element);
              _this.wthreechange = false;
            }
          });
      });
    },
    updateDcm4(item, i) {
      this.$nextTick(() => {
        this.fourMarkObj = item;
        let element = this.$refs.canvasfour;
        let _this = this;
        cornerstone
          .loadAndCacheImage(
            `https://ds.pushiyixue.com/file/${this.fourMarkObj.dsId}/${this.fourMarkObj.imgList[i]}`
          )
          .then(function (image) {
            _this.dcmFourNow = i;
            let viewport = cornerstone.getViewport(element);
            cornerstone.displayImage(element, image, viewport);
            cornerstone.reset(element, false);
            if (_this.wfourchange) {
              cornerstone.reset(element);
              _this.wfourchange = false;
            }
          });
      });
    },
    uodateOne(i) {
      let { dcmData } = this;
      this.$nextTick(() => {
        this.marksFlag = true;
        let element1 = this.$refs.canvas1[0];
        cornerstone.enable(element1);
        let element2;
        let element3;
        let element4;
        let element5;
        let element6;
        let element7;
        let element8;
        let element9;
        let element10;
        if (dcmData.length >= 2) {
          element2 = this.$refs.canvas2[0];
          cornerstone.enable(element2);
        }
        if (dcmData.length >= 3) {
          element3 = this.$refs.canvas3[0];
          cornerstone.enable(element3);
        }
        if (dcmData.length >= 4) {
          element4 = this.$refs.canvas4[0];
          cornerstone.enable(element4);
        }
        if (dcmData.length >= 5) {
          element5 = this.$refs.canvas5[0];
          cornerstone.enable(element5);
        }
        if (dcmData.length >= 6) {
          element6 = this.$refs.canvas6[0];
          cornerstone.enable(element6);
        }
        if (dcmData.length >= 7) {
          element7 = this.$refs.canvas7[0];
          cornerstone.enable(element7);
        }
        if (dcmData.length >= 8) {
          element8 = this.$refs.canvas8[0];
          cornerstone.enable(element8);
        }
        if (dcmData.length >= 9) {
          element9 = this.$refs.canvas9[0];
          cornerstone.enable(element9);
        }
        if (dcmData.length >= 10) {
          element10 = this.$refs.canvas10[0];
          cornerstone.enable(element10);
        }
        let _this = this;
        this.dcmData.forEach((item, index) => {
          cornerstone
            .loadAndCacheImage(
              `https://ds.pushiyixue.com/file/${item.dsId}/${item.imgList[i]}`
            )
            .then(function (image) {
              if (index == 0) {
                let viewport1 = cornerstone.getViewport(element1);
                cornerstone.displayImage(element1, image, viewport1);
              } else if (index == 1) {
                let viewport2 = cornerstone.getViewport(element2);
                cornerstone.displayImage(element2, image, viewport2);
              } else if (index == 2) {
                let viewport3 = cornerstone.getViewport(element3);
                cornerstone.displayImage(element3, image, viewport3);
              } else if (index == 3) {
                let viewport4 = cornerstone.getViewport(element4);
                cornerstone.displayImage(element4, image, viewport4);
              } else if (index == 4) {
                let viewport5 = cornerstone.getViewport(element5);
                cornerstone.displayImage(element5, image, viewport5);
              } else if (index == 5) {
                let viewport6 = cornerstone.getViewport(element6);
                cornerstone.displayImage(element6, image, viewport6);
              } else if (index == 6) {
                let viewport7 = cornerstone.getViewport(element7);
                cornerstone.displayImage(element7, image, viewport7);
              } else if (index == 7) {
                let viewport8 = cornerstone.getViewport(element8);
                cornerstone.displayImage(element8, image, viewport8);
              } else if (index == 8) {
                let viewport9 = cornerstone.getViewport(element9);
                cornerstone.displayImage(element9, image, viewport9);
              } else if (index == 9) {
                let viewport10 = cornerstone.getViewport(element10);
                cornerstone.displayImage(element10, image, viewport10);
              }
              // else if (index == 10) {
              //   let viewport10 = cornerstone.getViewport(element10);
              //   cornerstone.displayImage(element10, image, viewport10);
              // }
            });
        });
      });
    },
    // 监听图像
    onImageRendered(e) {
      let eventData = e.detail;
      this.imageEvent1 = eventData.image;
      this.wwone = Math.round(eventData.viewport.voi.windowWidth);
      this.wcone = Math.round(eventData.viewport.voi.windowCenter);
      this.scaleone = eventData.viewport.scale.toFixed(2);
      if (this.aiFlag) {
        this.drawCount(
          eventData.canvasContext,
          this.drawOneData,
          this.dcmOneNow
        );
      }
    },
    onImageRenderedTwo(e) {
      let eventData = e.detail;
      this.wwtwo = Math.round(eventData.viewport.voi.windowWidth);
      this.wctwo = Math.round(eventData.viewport.voi.windowCenter);
      this.scaletwo = eventData.viewport.scale.toFixed(2);
      if (this.aiFlag) {
        this.drawCount(
          eventData.canvasContext,
          this.drawTwoData,
          this.dcmTwoNow
        );
      }
    },
    onImageRenderedThree(e) {
      let eventData = e.detail;
      this.wwthree = Math.round(eventData.viewport.voi.windowWidth);
      this.wcthree = Math.round(eventData.viewport.voi.windowCenter);
      this.scalethree = eventData.viewport.scale.toFixed(2);
      if (this.aiFlag) {
        this.drawCount(
          eventData.canvasContext,
          this.drawThreeData,
          this.dcmThreeNow
        );
      }
    },
    onImageRenderedFour(e) {
      let eventData = e.detail;
      this.wwfour = Math.round(eventData.viewport.voi.windowWidth);
      this.wcfour = Math.round(eventData.viewport.voi.windowCenter);
      this.scalefour = eventData.viewport.scale.toFixed(2);
      if (this.aiFlag) {
        this.drawCount(
          eventData.canvasContext,
          this.drawFourData,
          this.dcmFourNow
        );
      }
    },
    // wwwc工具
    wwcDisplay() {
      this.wwwcFlag = !this.wwwcFlag;
      this.zoomFlag = false;
      this.drawFlag = false;
      this.slideFlagone = false;
      this.slideFlagtwo = false;
      this.slideFlagthree = false;
      this.slideFlagfour = false;
      const Wwwc = cornerstoneTools.WwwcTool;
      cornerstoneTools.addTool(Wwwc);
      if (this.wwwcFlag) {
        cornerstoneTools.setToolActive("Wwwc", { mouseButtonMask: 1 });
      } else {
        cornerstoneTools.setToolDisabled("Wwwc");
      }
    },
    // 移动
    zoomDisplay() {
      this.zoomFlag = !this.zoomFlag;
      this.wwwcFlag = false;
      this.drawFlag = false;
      this.slideFlagone = false;
      this.slideFlagtwo = false;
      this.slideFlagthree = false;
      this.slideFlagfour = false;
      if (this.zoomFlag) {
        //(默认可平移)
        let PanTool = cornerstoneTools.PanTool;
        cornerstoneTools.addTool(PanTool);
        cornerstoneTools.setToolActive("Pan", { mouseButtonMask: 1 });

        const ZoomTouchPinchTool = cornerstoneTools.ZoomTouchPinchTool;
        cornerstoneTools.addTool(ZoomTouchPinchTool, {
          configuration: {
            invert: false,
            preventZoomOutsideImage: false,
            minScale: 0,
            maxScale: 20.0,
          },
        });
        cornerstoneTools.setToolActive("ZoomTouchPinch", {
          mouseButtonMask: 1,
        });
      } else {
        cornerstoneTools.setToolDisabled("Zoom");
        cornerstoneTools.setToolDisabled("Pan");
      }
    },
    // 反转色
    sliderDisplay() {
      let i = this.selectIndex;
      let element = this.$refs.canvas;
      let element2 = this.$refs.canvastwo;
      let element3 = this.$refs.canvasthree;
      let element4 = this.$refs.canvasfour;
      if (i == 0) {
        let viewport = cornerstone.getViewport(element);
        viewport.invert = !viewport.invert;
        cornerstone.setViewport(element, viewport);
      } else if (i == 1) {
        if (this.twoMarkObj.imgList) {
          let viewport1 = cornerstone.getViewport(element2);
          viewport1.invert = !viewport1.invert;
          cornerstone.setViewport(element2, viewport1);
        }
      } else if (i == 2) {
        if (this.threeMarkObj.imgList) {
          let viewport2 = cornerstone.getViewport(element3);
          viewport2.invert = !viewport2.invert;
          cornerstone.setViewport(element3, viewport2);
        }
      } else if (i == 3) {
        if (this.fourMarkObj.imgList) {
          let viewport3 = cornerstone.getViewport(element4);
          viewport3.invert = !viewport3.invert;
          cornerstone.setViewport(element4, viewport3);
        }
      }
    },
    // 旋转90
    roate90() {
      let i = this.selectIndex;
      let element = this.$refs.canvas;
      let element2 = this.$refs.canvastwo;
      let element3 = this.$refs.canvasthree;
      let element4 = this.$refs.canvasfour;
      if (i == 0) {
        let viewport = cornerstone.getViewport(element);
        viewport.rotation = viewport.rotation + 90;
        cornerstone.setViewport(element, viewport);
      } else if (i == 1) {
        if (this.twoMarkObj.imgList) {
          let viewport1 = cornerstone.getViewport(element2);
          viewport1.rotation = viewport1.rotation + 90;
          cornerstone.setViewport(element2, viewport1);
        }
      } else if (i == 2) {
        if (this.threeMarkObj.imgList) {
          let viewport2 = cornerstone.getViewport(element3);
          viewport2.rotation = viewport2.rotation + 90;
          cornerstone.setViewport(element3, viewport2);
        }
      } else if (i == 3) {
        if (this.fourMarkObj.imgList) {
          let viewport3 = cornerstone.getViewport(element4);
          viewport3.rotation = viewport3.rotation + 90;
          cornerstone.setViewport(element4, viewport3);
        }
      }
    },
    // 信息
    ggoDisplay() {
      this.ggoFlag = true;
    },
    // 勾画
    drawFun() {
      let { selectIndex } = this;
      cornerstoneTools.setToolDisabled("Wwwc");
      cornerstoneTools.setToolDisabled("Pan");
      cornerstoneTools.setToolDisabled("Zoom");
      this.wwwcFlag = false;
      this.zoomFlag = false;
      this.drawFlag = !this.drawFlag;
      this.slideFlagone = false;
      this.slideFlagtwo = false;
      this.slideFlagthree = false;
      this.slideFlagfour = false;
      if (selectIndex == 0) {
        this.slideFlagone = false;
      } else if (selectIndex == 1) {
        this.slideFlagtwo = false;
      } else if (selectIndex == 1) {
        this.slideFlagthree = false;
      } else if (selectIndex == 1) {
        this.slideFlagfour = false;
      }
    },
    // ai标注
    aiDisplay() {
      this.aiFlag = !this.aiFlag;
      let element1 = this.$refs.canvas;
      const viewport1 = cornerstone.getViewport(element1);
      cornerstone.setViewport(element1, viewport1);
      if (this.twoMarkObj.imgList) {
        let element2 = this.$refs.canvastwo;
        const viewport2 = cornerstone.getViewport(element2);
        cornerstone.setViewport(element2, viewport2);
      }
      if (this.threeMarkObj.imgList) {
        let element3 = this.$refs.canvasthree;
        const viewport3 = cornerstone.getViewport(element3);
        cornerstone.setViewport(element3, viewport3);
      }
      if (this.fourMarkObj.imgList) {
        let element4 = this.$refs.canvasfour;
        const viewport4 = cornerstone.getViewport(element4);
        cornerstone.setViewport(element4, viewport4);
      }
    },
    // 重置
    reset() {
      let i = this.selectIndex;
      if (i == 0) {
        clearInterval(this.timerOne);
        let element = this.$refs.canvas;
        cornerstone.reset(element);
        this.resetFun();
        this.updateDcm(this.oneMarkObj, 0);
      } else if (i == 1) {
        clearInterval(this.timerTwo);
        let element = this.$refs.canvastwo;
        cornerstone.reset(element);
        this.resetFun();
        this.updateDcm2(this.twoMarkObj, 0);
      } else if (i == 2) {
        clearInterval(this.timerThree);
        let element = this.$refs.canvasthree;
        cornerstone.reset(element);
        this.resetFun();
        this.updateDcm3(this.threeMarkObj, 0);
      } else if (i == 3) {
        clearInterval(this.timerFour);
        let element = this.$refs.canvasfour;
        cornerstone.reset(element);
        this.resetFun();
        this.updateDcm4(this.fourMarkObj, 0);
      }
    },
    // 重置封装
    resetFun() {
      cornerstoneTools.setToolDisabled("Wwwc");
      cornerstoneTools.setToolDisabled("Pan");
      cornerstoneTools.setToolDisabled("Zoom");
      this.wwwcFlag = false;
      this.zoomFlag = false;
      this.playFlag = false;
      this.drawFlag = false;
      this.flagArr[this.selectIndex] = false;
    },
    // 序列
    xulieClick() {
      this.xulieFlag = !this.xulieFlag;
      this.funFlag = false;
    },
    // 播放
    imagePlay(i) {
      this.drawFlag = false;
      if (i == 0 && this.btnFlag) {
        this.flagArr[i] = !this.flagArr[i];
        if (this.flagArr[i]) {
          this.timerOne = setInterval(() => {
            if (this.dcmOneNow >= this.oneMarkObj.imgList.length - 1) {
              this.updateDcm(this.oneMarkObj, 0);
            } else {
              this.updateDcm(this.oneMarkObj, this.dcmOneNow + 1);
            }
          }, 100);
        } else {
          clearInterval(this.timerOne);
        }
      } else if (i == 1 && this.btnFlag) {
        this.flagArr[i] = !this.flagArr[i];
        if (this.flagArr[i]) {
          this.timerTwo = setInterval(() => {
            if (this.dcmTwoNow >= this.twoMarkObj.imgList.length - 1) {
              this.updateDcm2(this.twoMarkObj, 0);
            } else {
              this.updateDcm2(this.twoMarkObj, this.dcmTwoNow + 1);
            }
          }, 100);
        } else {
          clearInterval(this.timerTwo);
        }
      } else if (i == 2 && this.btnFlag) {
        this.flagArr[i] = !this.flagArr[i];
        if (this.flagArr[i]) {
          this.timerThree = setInterval(() => {
            if (this.dcmThreeNow >= this.threeMarkObj.imgList.length - 1) {
              this.updateDcm3(this.threeMarkObj, 0);
            } else {
              this.updateDcm3(this.threeMarkObj, this.dcmThreeNow + 1);
            }
          }, 100);
        } else {
          clearInterval(this.timerThree);
        }
      } else if (i == 3 && this.btnFlag) {
        this.flagArr[i] = !this.flagArr[i];
        if (this.flagArr[i]) {
          this.timerFour = setInterval(() => {
            if (this.dcmFourNow >= this.fourMarkObj.imgList.length - 1) {
              this.updateDcm4(this.fourMarkObj, 0);
            } else {
              this.updateDcm4(this.fourMarkObj, this.dcmFourNow + 1);
            }
          }, 100);
        } else {
          clearInterval(this.timerFour);
        }
      }
      if (this.flagArr[i]) {
        this.playFlag = true;
      } else {
        this.playFlag = false;
      }
    },
    // 左滑
    swiperleft(i) {
      if (i == 0) {
        this.selectIndex = 0;
        if (this.slideFlagone) {
          if (this.dcmOneNow >= this.oneMarkObj.imgList.length - 1) {
            this.updateDcm(this.oneMarkObj, 0);
            // this.updateDcm(this.oneMarkObj, this.oneMarkObj.imgList.length - 1);
            // Notify({
            //   type: "warning",
            //   message: "已经是最后一张了！",
            // });
          } else {
            this.updateDcm(this.oneMarkObj, this.dcmOneNow + 1);
          }
        }
      } else if (i == 1) {
        this.selectIndex = 1;
        if (this.twoMarkObj.imgList) {
          if (this.slideFlagtwo) {
            if (this.dcmTwoNow >= this.twoMarkObj.imgList.length - 1) {
              this.updateDcm2(this.twoMarkObj, 0);
            } else {
              this.updateDcm2(this.twoMarkObj, this.dcmTwoNow + 1);
            }
          }
        }
      } else if (i == 2) {
        this.selectIndex = 2;
        if (this.threeMarkObj.imgList) {
          if (this.slideFlagthree) {
            if (this.dcmThreeNow >= this.threeMarkObj.imgList.length - 1) {
              this.updateDcm3(this.threeMarkObj, 0);
            } else {
              this.updateDcm3(this.threeMarkObj, this.dcmThreeNow + 1);
            }
          }
        }
      } else if (i == 3) {
        this.selectIndex = 3;
        if (this.fourMarkObj.imgList) {
          if (this.slideFlagfour) {
            if (this.dcmFourNow >= this.fourMarkObj.imgList.length - 1) {
              this.updateDcm4(this.fourMarkObj, 0);
            } else {
              this.updateDcm4(this.fourMarkObj, this.dcmFourNow + 1);
            }
          }
        }
      }
    },
    // 右滑
    swiperright(i) {
      if (i == 0) {
        this.selectIndex = 0;
        if (this.slideFlagone) {
          if (this.dcmOneNow <= 0) {
            this.updateDcm(this.oneMarkObj, 0);
            // Notify({
            //   type: "warning",
            //   message: "已经是第一张了！",
            // });
          } else {
            this.updateDcm(this.oneMarkObj, this.dcmOneNow - 1);
          }
        }
      } else if (i == 1) {
        this.selectIndex = 1;
        if (this.twoMarkObj.imgList) {
          if (this.slideFlagtwo) {
            if (this.dcmTwoNow <= 0) {
              this.updateDcm2(this.twoMarkObj, 0);
            } else {
              this.updateDcm2(this.twoMarkObj, this.dcmTwoNow - 1);
            }
          }
        }
      } else if (i == 2) {
        this.selectIndex = 2;
        if (this.threeMarkObj.imgList) {
          if (this.slideFlagthree) {
            if (this.dcmThreeNow <= 0) {
              this.updateDcm3(this.threeMarkObj, 0);
            } else {
              this.updateDcm3(this.threeMarkObj, this.dcmThreeNow - 1);
            }
          }
        }
      } else if (i == 3) {
        this.selectIndex = 2;
        if (this.fourMarkObj.imgList) {
          if (this.slideFlagfour) {
            if (this.dcmFourNow <= 0) {
              this.updateDcm4(this.fourMarkObj, 0);
            } else {
              this.updateDcm4(this.fourMarkObj, this.dcmFourNow - 1);
            }
          }
        }
      }
    },
    // 勾画函数封装
    drawCount(eventData, drawData, i) {
      let context = eventData;
      drawData.forEach((item, index) => {
        if (item.z == i) {
          let x = item.x.split(",");
          let y = item.y.split(",");
          context.beginPath();
          context.strokeStyle = "red";
          context.lineWidth = 3;
          context.font = "22px Verdana";
          context.fillStyle = "red";
          context.fillText(index + 1, x[0] - 25, y[0] + 35);
          x.forEach((items, indexs) => {
            if (indexs == 0) {
              context.moveTo(x[0], y[0]);
            } else {
              context.lineTo(x[indexs], y[indexs]);
            }
            context.stroke();
          });
        }
      });
    },
    // 返回上一页
    goBack() {
      this.$router.replace({
        name: "checkList",
      });
    },
    // 点击分享
    onSelect(option) {
      // let url = location.href;
      let url = `https://ds.pushiyixue.com/share/#/lungDetail?dsId=${
        this.dsId
      }&patientId=${this.patientId}&token=${sessionStorage.getItem(
        "userToken"
      )}`;

      let _this = this;
      if (option.name == "复制链接") {
        this.$copyText(url).then(
          function () {
            Notify({
              type: "success",
              message: _this.$t("detail.copy_successful") + "!",
            });
          },
          function () {
            Notify({
              type: "error",
              message: _this.$t("detail.copy_failed") + "!",
            });
          }
        );
      } else if (option.name == "二维码") {
        this.creatQrCode();
        this.showFade = true;
      }
      this.showShare = false;
    },
    // 生成qrcode
    async creatQrCode() {
      Toast.loading({
        message: "加载中...",
        forbidClick: true,
      });
      let { openid, dsId, patientId, shareTime, userDatas } = this;
      // key, time, dsid, lungid, name
      let dsids;
      if (this.$route.params.dsid) {
        dsids = this.$route.params.dsid;
      } else if (this.comData) {
        dsids = this.$route.params.comDsid;
      }
      let user = this.comData ? userDatas.userName : "";
      // if(this.comData) {
      //   user = userDatas.userName;
      // }
      let key = userDatas.phone;
      let res = await codeUpdate(key, shareTime, dsids, 2, user);
      if (res.status.code == 200) {
        let substr = res.data.path.match(/(\S*)\.png/);
        this.codeImg = substr[1] + "logo.png";
      }
    },
    //左按钮
    prvClick(i) {
      this.drawFlag = false;
      if (i == 0) {
        this.selectIndex = 0;
        if (this.dcmOneNow <= 0) {
          this.updateDcm(this.oneMarkObj, this.dcmOneNow);
        } else {
          this.updateDcm(this.oneMarkObj, this.dcmOneNow - 1);
        }
      } else if (i == 1) {
        this.selectIndex = 1;
        if (this.twoMarkObj.imgList) {
          if (this.dcmTwoNow <= 0) {
            this.updateDcm2(this.twoMarkObj, this.dcmTwoNow);
          } else {
            this.updateDcm2(this.twoMarkObj, this.dcmTwoNow - 1);
          }
        }
      } else if (i == 2) {
        this.selectIndex = 2;
        if (this.threeMarkObj.imgList) {
          if (this.dcmThreeNow <= 0) {
            this.updateDcm3(this.threeMarkObj, this.dcmThreeNow);
          } else {
            this.updateDcm3(this.threeMarkObj, this.dcmThreeNow - 1);
          }
        }
      } else if (i == 3) {
        this.selectIndex = 3;
        if (this.fourMarkObj.imgList) {
          if (this.dcmFourNow <= 0) {
            this.updateDcm4(this.fourMarkObj, this.dcmFourNow);
          } else {
            this.updateDcm4(this.fourMarkObj, this.dcmFourNow - 1);
          }
        }
      }
    },
    //右按钮
    nextClick(i) {
      this.drawFlag = false;
      if (i == 0) {
        this.selectIndex = 0;
        if (this.dcmOneNow >= this.oneMarkObj.imgList.length - 1) {
          this.updateDcm(this.oneMarkObj, 0);
        } else {
          this.updateDcm(this.oneMarkObj, this.dcmOneNow + 1);
        }
      } else if (i == 1) {
        this.selectIndex = 1;
        if (this.twoMarkObj.imgList) {
          if (this.dcmTwoNow >= this.twoMarkObj.imgList.length - 1) {
            this.updateDcm2(this.twoMarkObj, 0);
          } else {
            this.updateDcm2(this.twoMarkObj, this.dcmTwoNow + 1);
          }
        }
      } else if (i == 2) {
        this.selectIndex = 2;
        if (this.threeMarkObj.imgList) {
          if (this.dcmThreeNow >= this.threeMarkObj.imgList.length - 1) {
            this.updateDcm3(this.threeMarkObj, 0);
          } else {
            this.updateDcm3(this.threeMarkObj, this.dcmThreeNow + 1);
          }
        }
      } else if (i == 3) {
        this.selectIndex = 3;
        if (this.fourMarkObj.imgList) {
          if (this.dcmFourNow >= this.fourMarkObj.imgList.length - 1) {
            this.updateDcm4(this.fourMarkObj, 0);
          } else {
            this.updateDcm4(this.fourMarkObj, this.dcmFourNow + 1);
          }
        }
      }
    },
    // 滑动开启
    openSelect() {
      cornerstoneTools.setToolDisabled("Wwwc");
      cornerstoneTools.setToolDisabled("Pan");
      cornerstoneTools.setToolDisabled("Zoom");
      this.wwwcFlag = false;
      this.zoomFlag = false;
      this.drawFlag = false;
      let i = this.selectIndex;
      this.slideFlagone = true;
      this.slideFlagtwo = true;
      this.slideFlagthree = true;
      this.slideFlagfour = true;
    },
    // 布局点击
    oneone() {
      this.s1Flag = true;
      this.s2Flag = false;
      this.s3Flag = false;
      this.s4Flag = false;
      let element = this.$refs.canvas;
      let element2 = this.$refs.canvastwo;
      this.bujuFun();
      this.$nextTick(() => {
        cornerstone.resize(element, false);
        cornerstone.resize(element2, false);
      });
    },
    onetwo() {
      this.s1Flag = false;
      this.s2Flag = true;
      this.s3Flag = false;
      this.s4Flag = false;
      let element = this.$refs.canvas;
      let element2 = this.$refs.canvastwo;
      this.bujuFun();
      this.$nextTick(() => {
        cornerstone.resize(element, false);
        cornerstone.resize(element2, false);
      });
    },
    twoone() {
      this.s1Flag = false;
      this.s2Flag = false;
      this.s3Flag = true;
      this.s4Flag = false;
      let element = this.$refs.canvas;
      let element2 = this.$refs.canvastwo;
      this.bujuFun();
      this.$nextTick(() => {
        cornerstone.resize(element, false);
        cornerstone.resize(element2, false);
      });
    },
    twotwo() {
      this.s1Flag = false;
      this.s2Flag = false;
      this.s3Flag = false;
      this.s4Flag = true;
      let element = this.$refs.canvas;
      let element2 = this.$refs.canvastwo;
      let element3 = this.$refs.canvasthree;
      let element4 = this.$refs.canvasfour;
      this.bujuFun();
      this.$nextTick(() => {
        cornerstone.resize(element, false);
        cornerstone.resize(element2, false);
        cornerstone.resize(element3, false);
        cornerstone.resize(element4, false);
      });
    },
    // 布局fun
    bujuFun() {
      this.clickNow(0);
      this.flagArr[0] = false;
      this.flagArr[1] = false;
      this.flagArr[2] = false;
      this.flagArr[3] = false;
      clearInterval(this.timerOne);
      clearInterval(this.timerTwo);
      clearInterval(this.timerThree);
      clearInterval(this.timerFour);
      this.playFlag = false;
    },
    // 点击当前
    clickNow(i) {
      switch (i) {
        case 0:
          this.playFun(0);
          break;
        case 1:
          this.playFun(1);
          break;
        case 2:
          this.playFun(2);
          break;
        case 3:
          this.playFun(3);
          break;
      }
    },
    // 点击当前封装
    playFun(index) {
      this.selectIndex = index;
      if (
        Object.keys(
          index == 0
            ? this.oneMarkObj
            : index == 1
            ? this.twoMarkObj
            : index == 2
            ? this.threeMarkObj
            : this.fourMarkObj
        ).length > 0
      ) {
        if (this.flagArr[index]) {
          this.playFlag = true;
        } else {
          this.playFlag = false;
        }
        this.btnFlag = true;
      } else {
        this.btnFlag = false;
        this.playFlag = false;
      }
    },
    // 序列窗口点击
    xulieNowClick(item, index) {
      if (this.selectIndex == 0) {
        this.oneMarkObj = item;
        this.xulieNowIndex = index + 1;
        this.btnFlag = true;
        this.updateDcm(item, 0);
        let data = {
          dsId: this.oneMarkObj.dsId,
          orderId: this.$route.params.orderId,
        };
        getDataByDsid(data).then((res) => {
          if (res.status.code == 200) {
            this.drawOneData = res.data.analysisData;
            this.oneMarks = {};
            if (this.drawOneData.length > 0) {
              this.drawOneData.forEach((item) => {
                this.oneMarks[parseInt(item.z)] = "";
              });
            } else {
              this.oneMarks = {};
            }
            cornerstone.updateImage(this.$refs.canvas, true);
          }
        });
      } else if (this.selectIndex == 1) {
        this.twoMarkObj = item;
        this.xulieNowIndexTwo = index + 1;
        this.btnFlag = true;
        this.updateDcm2(item, 0);
        let data = {
          dsId: this.twoMarkObj.dsId,
          orderId: this.$route.params.orderId,
        };
        getDataByDsid(data).then((res) => {
          if (res.status.code == 200) {
            this.drawTwoData = res.data.analysisData;
            this.twoMarks = {};
            if (this.drawTwoData.length > 0) {
              this.drawTwoData.forEach((item) => {
                this.twoMarks[parseInt(item.z)] = "";
              });
            } else {
              this.twoMarks = {};
            }
            cornerstone.updateImage(this.$refs.canvastwo, true);
          }
        });
      } else if (this.selectIndex == 2) {
        this.threeMarkObj = item;
        this.xulieNowIndexThree = index + 1;
        this.btnFlag = true;
        this.updateDcm3(item, 0);
        let data = {
          dsId: this.threeMarkObj.dsId,
          orderId: this.$route.params.orderId,
        };
        getDataByDsid(data).then((res) => {
          if (res.status.code == 200) {
            this.drawThreeData = res.data.analysisData;
            this.threeMarks = {};
            if (this.drawThreeData.length > 0) {
              this.drawThreeData.forEach((item) => {
                this.threeMarks[parseInt(item.z)] = "";
              });
            } else {
              this.threeMarks = {};
            }
            cornerstone.updateImage(this.$refs.canvasthree, true);
          }
        });
      } else if (this.selectIndex == 3) {
        this.fourMarkObj = item;
        this.xulieNowIndexFour = index + 1;
        this.btnFlag = true;
        this.updateDcm4(item, 0);
        let data = {
          dsId: this.fourMarkObj.dsId,
          orderId: this.$route.params.orderId,
        };
        getDataByDsid(data).then((res) => {
          if (res.status.code == 200) {
            this.drawFourData = res.data.analysisData;
            this.fourMarks = {};
            if (this.drawFourData.length > 0) {
              this.drawFourData.forEach((item) => {
                this.fourMarks[parseInt(item.z)] = "";
              });
            } else {
              this.fourMarks = {};
            }
            cornerstone.updateImage(this.$refs.canvasfour, true);
          }
        });
      }
    },
    // 滑块滑动
    updateInput(index) {
      if (!this.flagArr[index]) {
        this.selectIndex = index;
      }
    },
    // 获取canvas对象
    getCanvas(element) {
      var CANVAS_CSS_CLASS = "cornerstone-canvas";
      var selector = "canvas.".concat(CANVAS_CSS_CLASS);
      return element.querySelector(selector);
    },
    // 监听
    drawListen(e) {
      this.drawListenFun(e, this.arrXone, this.arrYone, this.$refs.canvas);
    },
    drawTwoListen(e) {
      if (this.twoMarkObj.imgList) {
        this.drawListenFun(e, this.arrXone, this.arrYone, this.$refs.canvastwo);
      }
    },
    drawThreeListen(e) {
      if (this.threeMarkObj.imgList) {
        this.drawListenFun(
          e,
          this.arrXone,
          this.arrYone,
          this.$refs.canvasthree
        );
      }
    },
    drawFourListen(e) {
      if (this.fourMarkObj.imgList) {
        this.drawListenFun(
          e,
          this.arrXone,
          this.arrYone,
          this.$refs.canvasfour
        );
      }
    },
    // 监听移动封装
    drawListenFun(e, arrX, arrY, element) {
      if (this.drawFlag) {
        // let { arrX, arrY } = this;
        // let element = this.$refs.canvas;
        let x = e.changedTouches[0].pageX;
        let y = e.changedTouches[0].pageY;
        let pixel = cornerstone.pageToPixel(element, x, y);
        let c = this.getCanvas(element);
        let ctx = c.getContext("2d");
        arrX.push(pixel.x);
        arrY.push(pixel.y);
        ctx.strokeStyle = "red";
        ctx.save();
        ctx.lineCap = "round";
        ctx.lineTo(pixel.x, pixel.y);
        ctx.stroke();
        ctx.restore();
      }
    },
    drawStart(e) {
      this.clickNow(0);
      this.drawStartFun(e, this.$refs.canvas);
    },
    drawTwoStart(e) {
      if (this.twoMarkObj.imgList) {
        this.clickNow(1);
        this.drawStartFun(e, this.$refs.canvastwo);
      }
    },
    drawThreeStart(e) {
      if (this.threeMarkObj.imgList) {
        this.clickNow(2);
        this.drawStartFun(e, this.$refs.canvasthree);
      }
    },
    drawFourStart(e) {
      if (this.fourMarkObj.imgList) {
        this.clickNow(3);
        this.drawStartFun(e, this.$refs.canvasfour);
      }
    },
    // 监听开始封装
    drawStartFun(e, element) {
      let x = e.changedTouches[0].pageX;
      let y = e.changedTouches[0].pageY;
      let c = this.getCanvas(element);
      let ctx = c.getContext("2d");
      let pixel = cornerstone.pageToPixel(element, x, y);
      ctx.beginPath();
      ctx.moveTo(pixel.x, pixel.y);
    },
    // 监听松开
    drawEnd(e) {
      if (this.drawFlag && this.arrXone.length > 0) {
        this.drawOneShow = true;
      }
    },
    drawTwoEnd(e) {
      if (this.drawFlag && this.arrXone.length > 0) {
        this.drawOneShow = true;
      }
    },
    drawThreeEnd(e) {
      if (this.drawFlag && this.arrXone.length > 0) {
        this.drawOneShow = true;
      }
    },
    drawFourEnd(e) {
      if (this.drawFlag && this.arrXone.length > 0) {
        this.drawOneShow = true;
      }
    },
    // 取消理由
    drawOneConfirm() {
      if (this.drawOneMessage.length == 0) {
        Toast.fail("请输入勾画信息");
        setTimeout(() => {
          Toast.clear();
          this.drawOneShow = true;
        }, 500);
      } else {
        let {
          arrXone,
          arrYone,
          dcmOneNow,
          dcmTwoNow,
          dcmThreeNow,
          dcmFourNow,
          drawOneMessage,
          selectIndex,
        } = this;
        let data = {
          x: arrXone.join(","),
          y: arrYone.join(","),
          z:
            selectIndex == 0
              ? dcmOneNow
              : selectIndex == 1
              ? dcmTwoNow
              : selectIndex == 2
              ? dcmThreeNow
              : selectIndex == 3
              ? dcmFourNow
              : null,
          model: drawOneMessage,
          dsId:
            selectIndex == 0
              ? this.oneMarkObj.dsId
              : selectIndex == 1
              ? this.twoMarkObj.dsId
              : selectIndex == 2
              ? this.threeMarkObj.dsId
              : selectIndex == 3
              ? this.fourMarkObj.dsId
              : null,
          patientId: this.$route.params.orderId,
          imageName:
            selectIndex == 0
              ? this.oneMarkObj.imgList[dcmOneNow]
              : selectIndex == 1
              ? this.twoMarkObj.imgList[dcmTwoNow]
              : selectIndex == 2
              ? this.threeMarkObj.imgList[dcmThreeNow]
              : selectIndex == 3
              ? this.fourMarkObj.imgList[dcmFourNow]
              : null,
        };
        setPhoneLunginfo(data).then((res) => {
          if (res.status.code == 200) {
            this.drawOneMessage = "";
            this.arrXone = [];
            this.arrYone = [];
            let data = {
              dsId:
                selectIndex == 0
                  ? this.oneMarkObj.dsId
                  : selectIndex == 1
                  ? this.twoMarkObj.dsId
                  : selectIndex == 2
                  ? this.threeMarkObj.dsId
                  : selectIndex == 3
                  ? this.fourMarkObj.dsId
                  : null,
              orderId: this.$route.params.orderId,
            };
            getDataByDsid(data).then((res) => {
              if (res.status.code == 200) {
                if (selectIndex == 0) {
                  this.drawOneData = res.data.analysisData;
                  this.oneMarks = {};
                  if (this.drawOneData.length > 0) {
                    this.drawOneData.forEach((item) => {
                      this.oneMarks[parseInt(item.z)] = "";
                    });
                  } else {
                    this.oneMarks = {};
                  }
                } else if (selectIndex == 1) {
                  this.drawTwoData = res.data.analysisData;
                  this.twoMarks = {};
                  if (this.drawTwoData.length > 0) {
                    this.drawTwoData.forEach((item) => {
                      this.twoMarks[parseInt(item.z)] = "";
                    });
                  } else {
                    this.twoMarks = {};
                  }
                } else if (selectIndex == 2) {
                  this.drawThreeData = res.data.analysisData;
                  this.threeMarks = {};
                  if (this.drawThreeData.length > 0) {
                    this.drawThreeData.forEach((item) => {
                      this.threeMarks[parseInt(item.z)] = "";
                    });
                  } else {
                    this.threeMarks = {};
                  }
                } else if (selectIndex == 3) {
                  this.drawFourData = res.data.analysisData;
                  this.fourMarks = {};
                  if (this.drawFourData.length > 0) {
                    this.drawFourData.forEach((item) => {
                      this.fourMarks[parseInt(item.z)] = "";
                    });
                  } else {
                    this.fourMarks = {};
                  }
                }
              }
            });
          }
        });
      }
    },
    //
    drawOneCancel() {
      this.drawOneMessage = "";
      this.arrXone = [];
      this.arrYone = [];
      let { selectIndex } = this;
      if (selectIndex == 0) {
        cornerstone.updateImage(this.$refs.canvas, true);
      } else if (selectIndex == 1) {
        cornerstone.updateImage(this.$refs.canvastwo, true);
      } else if (selectIndex == 2) {
        cornerstone.updateImage(this.$refs.canvasthree, true);
      } else if (selectIndex == 3) {
        cornerstone.updateImage(this.$refs.canvasfour, true);
      }
      // this.updateDcm(this.oneMarkObj, this.dcmOneNow);
    },
    // 功能打开
    funOpen() {
      this.funFlag = !this.funFlag;
      this.xulieFlag = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  min-height: 100vh;
  position: relative;
  background: black;

  & .van-notice-bar {
    position: absolute;
    top: 45px;
    z-index: 10;
    width: 100%;
    box-sizing: border-box;
    font-size: 0.14rem;
    height: 0.4rem;
    line-height: 0.24rem;
  }
}
.header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  height: 45px;
  background: #4775d9;
  background-image: linear-gradient(211deg, #5d5cbf 0%, #4775d9 100%);
  color: #fff;
  & .name {
    font-size: 18px;
  }
  & .icon {
    height: 45px;
    width: 45px;
    line-height: 45px;
    font-size: 20px;
  }
}

.image-container::-webkit-scrollbar {
  display: none;
}
.center {
  position: relative;
  // display: inline-;
  float: left;
  width: 50%;
  height: 100%;
  box-sizing: border-box;
  border: 2px solid #666666;
  & .canvas {
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    position: absolute;
  }
}
.canvas-tip {
  position: absolute;
  padding: 0 0.02rem;
  box-sizing: border-box;
  bottom: 0.3rem;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  z-index: 1;
  color: #cccccc;
  & span {
    display: inline-block;
    font-size: 0.12rem;
    font-weight: 500;
  }
}
.footer {
  position: fixed;
  z-index: 10;
  bottom: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0.15rem;
  box-sizing: border-box;
  height: 0.45rem;
  background: rgb(55, 81, 255) !important;
  background-image: linear-gradient(
    rgb(55, 81, 255) 0%,
    rgb(76, 99, 255) 50%,
    rgb(91, 112, 255) 75%,
    rgb(107, 127, 255) 100%
  ) !important;
  color: #fff;
  & .icon {
    font-size: 0.2rem;
  }
  & .btn {
    & .text {
      display: block;
      font-size: 0.12rem;
      margin-top: 0.02rem;
    }
  }
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-active {
  opacity: 0;
}

.nowClick {
  color: rgba(255, 0, 0, 0.87);
}

.custom-button {
  width: 0.34rem;
  height: 0.22rem;
  color: #fff;
  font-size: 0.14rem;
  line-height: 0.22rem;
  text-align: center;
  background: #4775d9;
  border-radius: 100px;
}

.slider {
  width: 100%;
  position: absolute;
  align-items: center;
  bottom: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  & .elslider {
    width: 80%;
  }
}

.wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 3.5rem;
  height: 5rem;
  margin: auto;
  background: url()
    no-repeat;
  background-size: 100% 100%;
  margin-top: 0.25rem;
  & .title {
    font-size: 0.16rem;
    margin-top: 0;
    margin-bottom: 0.1rem;
  }
  & p {
    font-size: 0.14rem;
    text-align: left;
    line-height: 0.25rem;
  }
  & .van-icon {
    vertical-align: sub;
    margin-right: 0.05rem;
    font-size: 0.16rem;
  }
  & .vicon {
    margin: 0.2rem auto;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: #4775d9;
    & .van-icon {
      color: #fff;
      margin: auto;
      line-height: 0.45rem;
      font-size: 0.26rem;
    }
  }
}

.qrcode {
  width: 210px;
  height: 210px;
  background-color: #232323;
  display: inline-block;
}
/deep/ .el-slider__stop {
  background: red !important;
  width: 0.06rem;
  height: 0.1rem;
}
/deep/ .el-slider__button-wrapper {
  z-index: 1 !important;
  height: 0.36rem !important;
  width: 0.36rem !important;
  top: -0.13rem !important;
}
.next {
  position: relative;
  display: inline-block;
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
  & .van-icon {
    line-height: 0.3rem;
    text-align: center;
  }
}
.next:active,
.prv:active {
  background: rgba(255, 255, 255, 0.534);
}
.prv {
  position: relative;
  display: inline-block;
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
  & .van-icon {
    transform: rotate(180deg);
    line-height: 0.3rem;
    text-align: center;
  }
}
.line {
  margin: 0.38rem 0 0.1rem 0;
}
.per-mes {
  width: 95%;
  margin: auto;
  margin-top: 0.2rem;
  text-align: left;
  border: 1px solid #ebedf0;
  background: #e3e3e3;
  border-radius: 5px;
  padding: 0.1rem;
  box-sizing: border-box;
  & div {
    display: flex;
    & p {
      width: 50%;
    }
  }
  & p {
    margin: 0.1rem 0;
    font-size: 0.14rem;
    display: inline-block;
  }
}
.per-mes1 {
  width: 95%;
  margin: auto;
  margin-top: 0.2rem;
  text-align: left;
  border: 1px solid #ebedf0;
  background: #e3e3e3;
  border-radius: 5px;
  padding: 0.1rem;
  box-sizing: border-box;
  & div {
    display: flex;
    justify-content: space-around;
  }
  & p {
    margin: 0.1rem 0;
    font-size: 0.14rem;
    display: inline-block;
  }
}
.ggo-list {
  width: 94%;
  background: #ffffff;
  margin: 0 auto;
  // margin-top: 0.5rem;
  box-shadow: 0px 0px 10px #cccccc;
  margin-bottom: 20px;
  & .child {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background: #fff;
    flex: 1;
    & .ids {
      font-size: 0.14rem;
      flex-basis: 10%;
    }
    & .site {
      display: flex;
      flex-direction: column;
      font-size: 0.12rem;
      color: rgba(255, 0, 0, 0.616);
      flex-basis: 22%;
    }
    & .prob {
      font-size: 0.12rem;
      flex-basis: 20%;
    }
    & .level {
      font-size: 0.14rem;
      flex-basis: 15%;
    }
  }
}
.openSlider {
  position: absolute;
  z-index: 1;
  right: 0;
  color: #ffb939;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  & span:nth-of-type(1) {
    font-size: 0.12rem;
  }
}
.closeSlider {
  color: #999999;
}
.play-logo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  & span {
    font-size: 0.12rem;
    margin-top: 0.02rem;
  }
}
.image-container {
  position: relative;
  overflow: hidden;
  overflow-x: scroll;
  height: 0.65rem;
  background: transparent;
  & .select-icon {
    position: fixed;
    left: 0;
    top: 0.6rem;
    width: 0.25rem;
    height: 0.4rem;
    line-height: 0.45rem;
    background: #1b59df;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    z-index: 5;
  }
  & .image-list {
    float: left;
    margin-left: 0.01rem;
    margin-top: 0.02rem;
    height: 0.65rem;
    list-style: none;
    white-space: nowrap;
    display: inline-flex;
    & .image-box {
      float: left;
      width: 0.6rem;
      height: 0.62rem;
      border: 1px solid #666;
      box-sizing: border-box;
      margin-right: 0.025rem;
      position: relative;
      overflow: hidden;
      & .canvas {
        width: 100%;
        height: 0.58rem;
      }
      & img {
        width: 100%;
        height: 100%;
      }
      & .window {
        display: inline-block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0px;
        left: 0;
        font-size: 0.14rem;
        color: #ffffff;
        line-height: 1.05rem;
      }
    }
  }
}
.xulie {
  position: fixed;
  width: 1.5rem;
  background: #333;
  border-radius: 2px;
  bottom: 0.45rem;
  z-index: 10;
  & ul {
    padding: 0 0.1rem;
    & li {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      height: 0.3rem;
      // line-height: 0.3rem;
      & span {
        font-size: 0.14rem;
        color: #fff;
        text-align: left;
      }
      & table {
        width: 0.2rem;
        height: 0.2rem;
        border-collapse: collapse;
        & td {
          border: 1px solid white;
          background-color: black;
        }
      }
    }
  }
}
.stone {
  display: flex;
  flex-direction: column;
  width: 100%;
  & .s-up {
    // display: flex;
    height: 50%;
    flex-direction: row;
  }
}
.w100 {
  width: 100%;
}
.w50 {
  width: 50%;
}
.h50 {
  height: 50% !important;
}
.h100 {
  height: 100% !important;
}
.selectNow {
  border: 2px dashed lime;
}
/deep/ .el-slider__runway {
  margin: 0 !important;
  height: 0.1rem;
  border-radius: 0;
}
/deep/ .el-slider__bar {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  height: 0.1rem;

  border-radius: 0;
}
/deep/ .el-slider__button {
  width: 0.16rem;
  height: 0.16rem;
}
.textL {
  position: absolute;
  bottom: 50%;
  left: 0;
  transform: translateY(-50%);
  color: #cccccc;
  font-size: 0.12rem;
}
.textR {
  position: absolute;
  bottom: 50%;
  right: 0;
  transform: translateY(-50%);
  color: #cccccc;
  font-size: 0.12rem;
}
.textXulie {
  position: absolute;
  top: 0.01rem;
  left: 0.01rem;
  color: #cccccc;
  font-size: 0.12rem;
}
.xulieTag {
  position: absolute;
  top: 1px;
  left: 1px;
}
.funList {
  position: fixed;
  display: flex;
  justify-content: space-around;
  // width: 2rem;
  background: #333;
  border-radius: 2px;
  bottom: 0.45rem;
  z-index: 10;
  & li {
    color: #fff;
    margin-right: 0.05rem;
    padding: 0.1rem;
    & .btn {
      display: flex;
      flex-direction: column;
      & .icon {
        font-size: 0.24rem;
      }
      & .text {
        margin-top: 0.05rem;
        font-size: 0.12rem;
      }
    }
  }
}
</style>
